<template>
  <div>
    <el-menu
        v-bind:default-active="currentPage"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#2b3338"
        text-color="white"
        active-text-color="goldenrod"
        unique-opened
    >
      <el-menu-item index="1" v-on:click="back">
        <i class="el-icon-location" ></i>
        <span slot="title" >首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>课程和成绩</span>
        </template>
        <el-menu-item-group>
          <template slot="title">课程</template>
          <el-menu-item index="2-2" v-on:click="Mycourse">我的课程</el-menu-item>
          <el-menu-item index="2-3" v-on:click="courseChoose">选择课程</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="成绩">
          <el-menu-item index="2-4" v-on:click="gradesBrowser">查看成绩</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-view"></i>
          <span >其他</span>
        </template>
        <el-menu-item-group>
          <template slot="title" >我的信息</template>
          <el-menu-item index="3-1" v-on:click="Infocheck"><i class="el-icon-edit"></i>编辑信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "asideRoute",
  methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
  },
    Infocheck:function(){
      window.open("/Info",'_self');
    },
    back:function (){
      window.open("/Main",'_self')
    },
    courseChoose() {
      window.open("/courseChoosing",'_self')
    },
    Mycourse(){
      window.open("/Mycourse",'_self')
    },
    gradesBrowser() {
      window.open("/gradesBrowser",'_self')
    }
  },
  props:{
    currentPage:String
  }
}
</script>

<style scoped>

</style>


